<template>
  <!-- 分包预留页面 -->
  <view class="pageLayout" @click="gotoOutApply">
    <view class="title">{{ title }}</view>
    <view class="list">
      <view class="item">
        <view class="icon">
          <view>
            <u-icon slot="icon" size="48rpx" :name="iconName"></u-icon>
          </view>
          <view class="right" v-if="showNumber"><text>{{ number }}</text></view>
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    title: {
      required: true,
      type: String,
      default: "",
    },
    iconName: {
      type: String,
      default: "https://www.yinyaoit.com/YY/with_audit_ico.png",
    },
    number: {
      type: String,
      default: "0",
    },
    url:{
      type: String,
      default: "/pagesA/outApply/index?type=1",
    },
    showNumber: {
      type: Boolean,
      default: true,
    },
  },

  components: {},
  data() {
    return {};
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 跳转外出申请单
     */
    gotoOutApply() {
      uni.navigateTo({
        url: this.url,
      });
    },
    /**
     * 跳转
     * @param item 列表项
     */
    clickItem(item) {
      uni.navigateTo({ url: item.url });
    },
  },
  onShow() {},
};
</script>
  <style lang="scss" scoped>
.pageLayout {
  padding: 32rpx 40rpx;
  background-color: #ffffff;
  border-radius: 18rpx;
  margin-bottom: 32rpx;
}
.list {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 100%;
    // margin-bottom: 30rpx;
    .icon {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right {
        text {
          font-family: DIN;
          font-size: 44rpx;
          font-weight: bold;
        }
      }
    }
    .text {
      font-size: 24rpx;
      color: #666666;
    }
  }
}
.title {
  font-size: 30rpx;
  color: #000000;
  font-weight: bolder;
  margin-bottom: 44rpx;
}
</style>